<template>
  <table-header
          :query-list="queryList"
          :left-col-span="16"
          :right-col-span="8"
          placeholder="请输入提供方名称"
          @pagination="getDataList"
  >
    <template #operation>
      <el-button type="primary" size="mini" @click="handleCreateContentProvider">
        <el-icon>
          <plus />
        </el-icon>
        新建提供方
      </el-button>
    </template>
  </table-header>
  <table-data
          :isloading="isloading"
          :table-data="tableData"
  >
    <template #main>
      <el-table-column label="提供方ID" prop="cpid" width="75" align="center"/>
      <el-table-column label="提供方名称" prop="name" show-overflow-tooltip />
      <el-table-column label="应用ID" prop="appid" show-overflow-tooltip />
      <el-table-column label=" 应用密钥" prop="appsecret" show-overflow-tooltip />
      <el-table-column label="内容包">
        <template #default="{row}">
          <div v-for="pkid in row.packageids" :key="pkid">{{packageOptions[pkid]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="白名单" align="center">
        <template #default="{row}">
          <span v-if="typeof row.whiteips == 'object'">
            <div v-for="ip in row.whiteips" :key="ip">{{ip}}</div>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="是否审核" width="70" align="center">
        <template #default="{row}">
          <span v-if="row.isreview == 1">审核</span>
          <span v-else>不审核</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" sortable width="70" align="center"/>
      <el-table-column label="创建时间" prop="ctime" sortable  width="140">
        <template #default="{row}">
          <span v-if="row.ctime">{{row.ctime.replace('T', ' ').replace('Z','')}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" prop="mtime" sortable  width="140">
        <template #default="{row}">
          <span v-if="row.mtime">{{row.mtime.replace('T', ' ').replace('Z','')}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="{row}">
          <el-button type="text" size="mini" @click="handleUpdateProvider(row)">编辑</el-button>
          <el-button type="text" size="mini" style="color: red" @click="handleDeleteProvider(row)">删除</el-button>
        </template>
      </el-table-column>
    </template>
  </table-data>
  <table-pagination
          :query-list="queryList"
          :total="tableData.total"
          @pagination="getDataList"
  />
  <create-content-provider
          ref="contentProviderRef"
          :dialog-visible="dialogVisible"
          :dialog-status="dialogStatus"
          :dialog-form-data="dialogFormData"
          :package-list="packageList"
          @handleCancelDialog="handleCancelDialog"
          @reloadData="getDataList"
  />
</template>

<script>
  import {ref, reactive, nextTick} from 'vue'
  import {useStore} from 'vuex'
  import {Plus} from "@element-plus/icons"
  import TableHeader from "../public/TableHeader";
  import TableData from "../public/TableData";
  import TablePagination from "../public/TablePagination";
  import CreateContentProvider from "./components/CreateContentProvider";
  import {getCps, deleteCp} from "@/api/cp";
  import {getPackages} from "@/api/package/package";
  import {ElMessageBox, ElMessage} from 'element-plus'

  export default {
    name: "index",
    components: {Plus, TableHeader, TableData, TablePagination, CreateContentProvider},
    setup() {
      const store = useStore()
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        keyword: undefined
      })
      const isloading = ref(false)
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const dialogVisible = ref(false)
      const dialogStatus = ref('create')
      const dialogFormData = reactive({
        id: undefined,
        cpid: undefined,
        appid: undefined,
        appsecret: undefined,
        name: '',
        packageids: [],
        whiteips: [],
        isreview: undefined,
        sort: 1,
        inuse: 1
      })
      const contentProviderRef = ref(null)
      const packageList = ref([])
      const packageOptions = reactive({})

      /** 获取数据列表 **/
      const getDataList = () => {
        isloading.value = true
        getCps(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
        })
      }
      /** 创建内容提供方 **/
      const handleCreateContentProvider = () => {
        resetFormData()
        dialogStatus.value = 'create'
        dialogVisible.value = true
        nextTick(() => {
          contentProviderRef.value.dialogFormDataRef.clearValidate()
        })
      }
      /** 重置form表单 **/
      const resetFormData = () => {
        dialogFormData.name = ''
        dialogFormData.id = undefined
        dialogFormData.cpid = undefined
        dialogFormData.sort = 1
        dialogFormData.inuse = 1
        dialogFormData.packageids = []
        dialogFormData.whiteips = []
      }
      /** 关闭弹框 **/
      const handleCancelDialog = () => {
        dialogVisible.value = false
      }
      /** 获取内容包列表 **/
      const getPackageDataList = () => {
        getPackages({corpid: store.getters.corpinfo.corpid, subid: store.getters.subinfo.subid}).then(response => {
          packageList.value = response.data.list
          packageList.value.forEach(pk => {
            packageOptions[pk.packageid] = pk.name
          })
        })
      }
      /** 编辑内容提供方 **/
      const handleUpdateProvider = (row) => {
        dialogFormData.id = row.id
        dialogFormData.cpid = row.cpid
        dialogFormData.name = row.name
        dialogFormData.appid = row.appid
        dialogFormData.appsecret = row.appsecret
        dialogFormData.whiteips = typeof row.whiteips == 'object' && row.whiteips !== null ? row.whiteips : []
        dialogFormData.packageids = typeof  row.packageids == 'object' && row.packageids !== null ? row.packageids : []
        dialogFormData.sort = row.sort
        dialogFormData.inuse = row.inuse
        dialogStatus.value = 'update'
        dialogVisible.value = true
        nextTick(() => {
          contentProviderRef.value.dialogFormDataRef.clearValidate()
        })
      }
      /** 删除内容提供方 **/
      const handleDeleteProvider = (row) => {
        ElMessageBox.confirm('确定要删除提供方 ' + row.name + ' 吗？', '删除内容提供方', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCp({cpid: row.cpid}).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              getDataList()
            }
          })
        }).catch(() => {})
      }

      const init = () => {
        getPackageDataList()
        getDataList()
      }
      init()

      return {
        queryList,
        isloading,
        tableData,
        getDataList,
        handleCreateContentProvider,
        dialogStatus,
        dialogVisible,
        dialogFormData,
        handleCancelDialog,
        contentProviderRef,
        packageList,
        handleUpdateProvider,
        handleDeleteProvider,
        packageOptions
      }
    }
  }
</script>

<style scoped>

</style>
